<template>
  <div @click="openDefault($event)" class="openDefault">
    <vue-seamless-scroll :data="scrollData" class="seamless-warp" :class-option="classOption">
      <ul>
        <li :key="index" class="zxaj-card" v-for="(item, index) in scrollData">
          <p class="zxaj-card_header">
            <span :class="[asyncClassStyle(item.staFrom)]" class="tips" v-if="servers != 4">{{ item.sourceTitle ||
              item.typeTitle }}</span>
            <span class="tips4" v-if="servers == 4">
              <span :class="'tipsspan' + item.beforCheck">
                {{
                  item.beforCheck == 0
                  ? '待审核'
                  : item.beforCheck == 1
                    ? '审核通过'
                    : '审核驳回'
                }}
              </span>
              <span>{{ item.storeName }}</span>
            </span>
            <span :style="{ color: servers == 4 ? '#fff' : '' }" class="tips4-span" v-if="servers == 4">{{ item.createTime
            }}</span>
            <span v-if="servers != 4">{{ item.staLink }}</span>
          </p>
          <div class="zxaj-card_content flex">
            <img :src="item.img" v-if="isImg && item.img && servers != 2" />
            <div>
              <div v-if="servers == 4">
                <p class="tools4">{{ item.detailAddress }}</p>
              </div>
              <p>{{ item.content }}</p>
              <div class="flex tools">
                <span v-if="servers != 4">{{ item.createTime }}</span>
                <span v-else></span>
                <button :data-item="JSON.stringify(item)" v-if="servers != 3">查看</button>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </vue-seamless-scroll>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'

import Bus from '@/untils/bus'
import { Card } from 'element-ui'
import $ from 'jquery'
export default {
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      datalist: []
    }
  },
  props: {
    // 滚动数据 FLY (CSS 3D)
    scrollData: {
      type: Array,
      required: true
    },
    servers: {
      type: Number,
      default: 1
    },
    height: {
      type: Number,
      default: 550
    },
    isImg: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
    },
    classOption: {
      type: Object,
      default: () => ({
        // singleHeight: 154,
        direction: 1,
        limitMoveNum: 0.1,
        step: 0.5
      })
    }
  },
  computed: {
    asyncClassStyle() {
      // 数字城管-1  便民热线-2  其他-3
      return index => ['', 'tips-sz', 'tips-bm', 'tips-other'][index]
    }
  },
  methods: {
    openDefault(e) {
      console.log($(e.target).data('item'), 'openDefault==')
      let obj = $(e.target).data('item')
      if (this.servers === 4) {
        Bus.$emit('openDetailMen', obj)
      } else {
        let data = {
          id: obj.orderNum,
          img: obj.img
        }
        Bus.$emit('openDetail', data)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.seamless-warp {
  // background: #fff;
  height: 55rem;
  overflow: hidden;
}

.zxaj-card {
  position: relative;
  margin-bottom: 1rem;

  >.zxaj-card_header {
    height: 4rem;
    background: rgba(31, 73, 135, 0.8);
    border: 1px solid #2368ff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.4rem 0 1.8rem;

    span:nth-child(2) {
      color: #3cffff;
      font-size: 1.2rem;
    }
  }

  .tips {
    border-radius: 1rem 1rem 1rem 0px;
    width: 7rem;
    height: 2rem;
    color: #ffffff;
    font-size: 1.2rem;
    line-height: 2rem;
    text-align: center;

    &.tips-sz {
      background: #35cfe8;
    }

    &.tips-bm {
      background: #2c61ff;
    }

    &.tips-other {
      background: #b31ac6;
    }
  }

  .tips4 {
    display: flex;
    align-items: center;

    span:nth-child(1) {
      font-size: 1.4rem;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
      padding: 0.3rem 0.4rem;
      // background: #FF009C;
      margin-right: 1.5rem;
    }

    span:nth-child(2) {
      font-size: 1.6rem;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #ffffff;
    }

    .tipsspan0 {
      background: #ff009c;
    }

    .tipsspan1 {
      background: #00c000;
    }

    .tipsspan2 {
      background: #ccc;
    }
  }

  .zxaj-card_content {
    padding: 1.6rem;
    background-color: rgba(31, 73, 135, 0.25);
    display: flex;

    >img {
      display: block;
      width: 9rem;
      height: 7rem;
    }

    >div {
      margin-left: 1.6rem;
      flex: 1;

      >p {
        font-size: 1.4rem;
        color: #ffffff;
        line-height: 2.2em;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        white-space: pre-wrap;
        margin-bottom: 0.8rem;
      }
    }

    .tools {
      justify-content: space-between;

      span {
        font-size: 1.2rem;
        color: #9ed5ff;
      }

      button {
        cursor: pointer;
        width: 7rem;
        height: 2rem;
        background: rgba(31, 73, 135, 0.3);
        border: 1px solid #3cffff;
        border-radius: 1rem;
        color: #fff;
        background: url(../../components/ZuiXinAnJian/image/icon-anjian.png) no-repeat 85% 0.4rem;
        line-height: 2rem;
        text-indent: -0.5rem;
        font-size: 1.2rem;
      }
    }

    .tools4 {
      font-size: 1.4rem;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #11e0ff;
      line-height: 1.4rem;
    }

    .tools4-bottom {
      font-size: 1.4rem;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
      line-height: 2.2em;
      margin-top: 1rem;
    }
  }
}
</style>
